<template>
    <div class="profile-page">

  <div class="user-info">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <img :src="user&&user.image" class="user-img" />
          <h4>{{user.username}}</h4>
          <p>
            {{user.bio}}
          </p>
          <button class="btn btn-sm btn-outline-secondary action-btn" v-if="!user.following" @click="follow">
            <i class="ion-plus-round"></i>
            &nbsp;
            Follow Eric Simons 
          </button>
        </div>

      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-10 offset-md-1">
        <div class="articles-toggle">
          <ul class="nav nav-pills outline-active">
            <li class="nav-item">
              <nuxt-link 
                class="nav-link"
                exact
                :class="{active:$route.query.tab!='favorited'}"
                :to="{
                  name:'profile',
                  query:{
                      username:user.username,
                      tab:'my_article'
                  }
                }"
              >
                My Articles
              </nuxt-link>
            </li>
            <li class="nav-item">
              <nuxt-link 
                class="nav-link"
                exact
                :class="{active:$route.query.tab=='favorited'}"
                :to="{
                  name:'profile',
                  query:{
                      username:user.username,
                      tab:'favorited'
                  }
                }"
              >
                Favorited Articles
              </nuxt-link>
            </li>
          </ul>
        </div>

        <div class="article-preview" v-for="item in authArticles" :key="item.slug" v-if="$route.query.tab!='favorited'">
          <div class="article-meta">
            <nuxt-link 
              :to="{
                  name:'profile',
                  params:{
                      username:item.author.username
                  }
              }"
            >
              <img :src="item.author.image" />
            </nuxt-link>
            <div class="info">
              <nuxt-link 
                :to="{
                    name:'profile',
                    params:{
                        username:item.author.username
                    }
                }"
                class="author"
              >
                {{item.author.username}}
              </nuxt-link >
              <span class="date">{{item.updatedAt|date('MMM,DD')}}</span>
            </div>
            <button class="btn btn-outline-primary btn-sm pull-xs-right">
              <i class="ion-heart"></i> {{item.favoritesCount}}
            </button>
          </div>
          <nuxt-link
            :to={
              name:'article',
              params:{
                  slug:item.slug
              }
            } 
            class="preview-link">
            <h1>{{item.title}}</h1>
            <p>{{item.description}}</p>
            <span>Read more...</span>
          </nuxt-link>
        </div>
        <div class="article-preview" v-for="item in favArticle" :key="item.slug"  v-if="$route.query.tab=='favorited'">
          <div class="article-meta">
            <nuxt-link 
              :to="{
                  name:'profile',
                  params:{
                      username:item.author.username
                  }
              }"
            >
              <img :src="item.author.image" />
            </nuxt-link>
            <div class="info">
              <nuxt-link 
                :to="{
                    name:'profile',
                    params:{
                        username:item.author.username
                    }
                }"
                class="author"
              >
                {{item.author.username}}
              </nuxt-link >
              <span class="date">{{item.updatedAt|date('MMM,DD')}}</span>
            </div>
            <button class="btn btn-outline-primary btn-sm pull-xs-right">
              <i class="ion-heart"></i> {{item.favoritesCount}}
            </button>
          </div>
          <nuxt-link
            :to={
              name:'article',
              params:{
                  slug:item.slug
              }
            }
            class="preview-link" 
          >
            <h1>{{item.title}}</h1>
            <p>{{item.description}}</p>
            <span>Read more...</span>
            <ul class="tag-list" v-if="item.tagList.length>0">
              <li class="tag-default tag-pill tag-outline" v-for="subItem in item.tagList">{{subItem}}</li>
            </ul>
          </nuxt-link>
        </div>


      </div>

    </div>
  </div>

</div>
</template>
<script>
import {getProfile} from '@/api/profile'
import {getUser} from '@/api/user'
import {getArticle} from '@/api/article'
export default {
    middleware: 'authenticated',
    name:'ProfileIndex',
    async asyncData({params}){
      console.log(params,'params')
      // 获取用户信息、获取作者的文章、获取喜欢的文章
        const page = 1
        const limit = 10
        const [authorArticleRes,favArticleRes,userRes] = await Promise.all([
            getArticle({
                limit,
                offset:(page-1)*limit,
                page,
                author:params.username
            }),
            getArticle({
                limit,
                offset:(page-1)*limit,
                page,
                favorited:params.username
            }),
            getProfile(params.username)
        ])
        const { articles:authArticles } = authorArticleRes.data
        const { articles:favArticle } = favArticleRes.data
        const user = userRes.data.profile
        return {
            authArticles,
            favArticle,
            user
        }
    },
    methods:{
      follow(){
        alert('关注')
      }
    }
}
</script>